<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        .container{
          width: 600px;
          margin: 20px auto;
        }

        h1{
          text-align: center;
        }

        p{
          text-align: center;
          color: #666;
          margin: 20px 0;
        }

        .row{
          display: flex;
          height: 40px;
          justify-content: center;
          align-items: center;
        }

        .row span{
          width: 80px;
        }

        .row input{
          width: 200px;
          height: 30px;
        }

        .row button{
          width: 280px;
          height: 30px;
          color: white;
          background-color: orange;
          border: none;
          border-radius: 5px;
        }

        .row button:active{
          background-color: grey;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--前段引入第三方库-->
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交，信息会显示到下方表格中</p>
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>

    <script>
        <!-- 页面加载时要执行的代码-->
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function () {
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == ''){
                return;
            }
            <!-- 2. 构造新 div-->
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + '对' + to + '说: ' + msg;
            containerDiv.appendChild(rowDiv);
            <!-- 3. 清空之前的输入框内容-->
            for(let input of inputs){
                input.value = '';
            }
            <!-- 4. 把用户填写的内容发送给服务器让服务器来保存-->
            let requestBody = {
                "from": from,
                "to": to,
                "message": msg
            }
            let jsonString = JSON.stringify(requestBody);
            $.ajax({
                type : 'post',
                url : 'message', <!--相对路径-->
                contentType : 'application/json; charset=utf8',
                data : jsonString,
                success: function (responseBody){
                  <!--回调函数响应之后要执行的代码 -->
                    console.log("responseBody: " + responseBody); <!-- 打印日志到控制台-->
                }
            });
        }
        <!--发起一个get请求，从服务器获得数据get请求不需要body也就不需要data和contentType属性-->
        $.ajax({
            type : 'get',
            url : 'message',
            success: function (body) {
                let containerDiv = document.querySelector('.container');
                <!-- 此处的body就是一个json数组,-->
                <!--由于响应数据中带有ContentType:application/json,-->
                <!--jquery会自动把json字符串解析成js数组对象-->
                for (let i = 0; i < body.length; i++) {
                    let message = body[i];
                    <!-- 每个message对象都有三个属性 from to message-->
                    <!--根据message对象构造html片段并显示在网页上-->
                    let div = document.createElement('div');
                    div.className = 'row';
                    div.innerHTML = message.from + "对" + message.to + "说" + message.message;
                    <!--构造div标签并设置属性和内容使css能够为该元素设置样式并添加至containerDiv的末尾-->
                    containerDiv.appendChild(div);
                }
            }
        });
    </script>
</body>
</html>